<template>
    <div>
        <div>
            <!-- 调用接口数据渲染 -->
            <div v-for="(item, index) in listData" :key="index" class="list"
                style="margin-top: 8%; width: 100%;height: 180px;border-bottom: 1px solid #ccc;">

                <div style="width: 100%;height: 20%;">
                    <div class="left" style="float: left;margin-left: 4%;">
                        <!-- 图片 -->
                        <img :src="item.topic_info.doctor.image"
                            style="width:69px;height: 69px;border-radius: 42px; ; border: 1px solid #ccc;"
                            
                            
                            />
                    </div>

                    <div class="rigth" style="float: left ;width:16rem;margin-left: 2%;">
                        <!-- 右边文字 -->
                        <div style="margin-top:1%;line-height: 240%;">
                            <span style="margin-right: 0.2rem;">
                                {{ item.doctor_info.name }}
                            </span>
                            <span style="font-size: 0.8rem; color:#a2a2a2; margin-right: 0.5rem;">
                                {{ item.doctor_info.title }}
                            </span>
                            <span style="font-size: 0.8rem; color:#a2a2a2;">
                                {{ item.doctor_info.clinic_name }}
                            </span>
                        </div>

                        <div style="height:24px; width: 100%;">
                            <span style="margin-right: 4%; vertical-align:middle; color: #a2a2a2;border: 1px solid #ccc;border-radius:2.68rem;
                            width: 85px;height: 24px; text-align: center;  font-size: 16px;">
                                原创
                            </span>
                            <span style="color: #a2a2a2;">
                                {{ item.topic_info.created_time }}
                            </span>
                        </div>
                    </div>




                </div>
                <div style=" width: 100%; height: 100px;margin-left: 1%; text-align:left; margin-top:10%; ">
                    <div>
                        <div style="">{{ item.topic_info.title }}</div>
                        <div style="color: #a2a2a2;  
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
height: 40px; width: 100%;"> {{ item.topic_info.content }}</div>

                    </div>


                    <div style="width: 100%;height: 40px;text-align: center;line-height: 22px;">
                        <div style="width: 16%; height: 70%;margin-top: 4px;text-align:left;text-align: center;color: #a3a7aa;background-color: #f0f4f7;text-align:left;border-radius: 27px;
                             margin-left: 0px;float: left;
                            ">
                            <img src="../../../assets/问答.png" alt=""
                                style="width: 20px;height: 20px;margin-top: 3px;float: left;">
                            <span style="float: left;margin-top: 2px;margin-left: 2px;">简答</span>
                        </div>
                        
                        <div
                            style="margin-right:18px;margin-left: 58%; float: left;;margin-top: 4px; width: 20%;height: 70%; color: #d2d2d2;">
                            <span style="margin-right: 8px">阅读{{ item.topic_info.reply_num }}</span>
                            <span>赞{{ item.topic_info.support_num }}</span>
                        </div>
                    </div>
                </div>
                <div>

                </div>


            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'
import http from '@/http/axios'

const listData = ref([])
// https://www.chunyuyisheng.com/cooperation/wap/topic_check_list/
// https://www.chunyuyisheng.com/api/search/news/selected_doctor/
// 请求数据
async function GetList() {
    const resp = await http.get('/static/cooperation/wap/topic_check_list/', {
        params: {
            page: 1,
        }
    })
    console.log(resp.data.topic_check_list);
    const totalCount = resp.data.topic_check_list
    listData.value = totalCount
}
GetList()
</script>

<style lang="scss">


</style>